<style scoped lang="less">
	#app {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		color: #333;
		background-color: #fff;
		font-weight: 400;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		._loding {
			position: fixed;
			z-index: 9996;
			width: 100%;
			height: 100%;
			background-color: none;
			top: 0;
			left: 0;
			overflow: hidden;
			vertical-align: middle;
			.loding_blur {
				display: block;
				width: 100%;
				height: 100%;
				margin: 0 auto;
				left: 0;
				top: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: 1;
				position: relative;
				.lodingImg {
					width: 30px;
					height: 34px;
					border: 2px rgba(255, 255, 255, 1) solid;
					border-radius: 0px 0px 5px 5px;
					position: relative;
					margin: 0 auto;
					top: 50%;
					position: relative;
				}
				.lodingImg:after,
				.lodingImg:before {
					position: absolute;
					content: "";
				}
				.lodingImg:before {
					width: 2px;
					height: 6px;
					background-color: rgba(255, 255, 255, 1);
					top: -10px;
					left: 7px;
					box-shadow: 5px 0px 0px 0px rgba(255, 255, 255, 1), 5px -5px 0px 0px rgba(255, 255, 255, 1), 10px 0px 0px 0px rgba(255, 255, 255, 1);
					-webkit-animation: steam 1s linear infinite alternate;
					-moz-animation: steam 1s linear infinite alternate;
					animation: steam 1s linear infinite alternate;
				}
				.lodingImg:after {
					width: 8px;
					height: 18px;
					border: 2px #fff solid;
					border-left: none;
					border-radius: 0px 20px 20px 0px;
					left: 30px;
				}
			}
		}
		.App-wrapper {
			width: 100%;
			height: 100%;
			overflow: hidden;
			z-index: 1;
			position: relative;
		}
	}
	
	@-webkit-keyframes steam {
		0% {
			height: 0px;
		}
		100% {
			height: 6px;
		}
	}
	
	@-moz-keyframes steam {
		0% {
			height: 0px
		}
		100% {
			height: 6px;
		}
	}
	
	@keyframes steam {
		0% {
			height: 0px
		}
		100% {
			height: 6px;
		}
	}
</style>
<template>
	<div id="app" class="body">
		<div class="App-wrapper">
			<router-view></router-view>
		</div>
		<div class="_loding" v-show="Vuex.state._loding">
			<div class="loding_blur">
				<div class="lodingImg"></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'app',
		methods: {
			IsLoding() {
				if(this.Vuex.state._loding) {
					this.CloseLoding();
				} else {
					this.Vuex.state._loding = false
				}
			},
			CloseLoding() {
				this.Vuex.state._loding = false
			}
		},
		created() {
			this.IsLoding()
		},
	}
</script>